<template>
    <div>
        <el-row style="margin-bottom:20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>院校展示</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==1">图片列表</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==2">新增院校</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==3">修改院校</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row v-show='showPage==1'>
            <el-row :gutter="10">
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='add'>新增院校</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:20px;" :gutter='20' v-for='itemRow in imgList' :key='itemRow.id'>
                <el-col :span='4' v-for='item in itemRow.data' :key='item.id'>
                    <el-card :body-style="{padding: '0px'}">
                        <el-image style="width:100%; height:100%;  max-height: 400px;" :fit='imgFit' :src='item.imgUrl' :preview-src-list='[item.imgUrl]'/>
                        <div style="padding: 10px;">
                            <el-row>
                                <el-col :span='8'>
                                    <el-tag size="small">序号: {{item.orderNum}}</el-tag>
                                </el-col>
                               <el-col :span='8' :offset="8" style="text-align: right;" class='my-detail-button'>
                                    <el-button type="text" class="button" @click='modify(item)'>修改</el-button>
                                    <el-button type="text" class="button" @click='goDelete(item)'>删除</el-button>
                                </el-col>
                            </el-row>
                            <el-row style='margin-top:5px;'>
                                <el-col :span='24'>
                                    <!-- <el-tag type="success" size="small">{{item.title}}</el-tag> -->
                                    <span style="font-size: 14px;">{{item.title}}</span>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-row>

        <!-- 新增轮播图 -->
        <el-row v-show='showPage==2 || showPage==3'>
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size='small' @click='showPage=1'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:20px;">
                 <el-col :span='10'>
                        <el-form :label-position="addForm.labelPosition" label-width="200px" 
                        :model="addForm" ref='addForm' size="small" :rules="addForm.rules">
                            <el-form-item label="院校图片(300*300)" prop='imageUrl'>
                                <el-upload
                                :action="uploadImgUrl"
                                :show-file-list="false"
                                :headers="headers"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                    <img v-if="addForm.imageUrl" :src="addForm.imageUrl" style="width:100px;height:100px; border:1px solid #ffffff;"/>
                                    <img v-else src="../../assets/img/add_img.png" style="width:100px;height:100px; border:1px solid #ffffff;"/>
                            </el-upload>
                            <el-input v-model="addForm.imageUrl" v-show='false'></el-input>
                            </el-form-item>
                            <el-form-item label="院校名称" prop='title'>
                                <el-input style="width:648px;" v-model="addForm.title" placeholder="请输入标题"></el-input>
                            </el-form-item>
                            <el-form-item label="院校地址" prop='linkUrl'>
                                <el-input style="width:648px;" v-model="addForm.linkUrl" placeholder="请输入院校地址"></el-input>
                            </el-form-item>
                            <el-form-item label="排序号" prop='orderNum'>
                                <el-input-number v-model="addForm.orderNum" :min="1" :max="100" :precision="0"></el-input-number>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('addForm')">提交</el-button>
                            </el-form-item>
                        </el-form>
                 </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
import conf from '@/utils/conf.js'
export default {
    data() {
        return {
            showPage: 1,
            imgList: [],
            imgFit: 'fill',
            uploadImgUrl: conf.baseUrl() + '/api/img/upload',
            headers: {
                Authorization: sessionStorage.token,
                item: 'carousel',
            },
            addForm: {
                id: '',
                imageUrl: '',
                title: '',
                linkUrl: '',
                labelPosition: 'right',
                orderNum: 1,
                rules: {
                    imageUrl: [{required: true, message: '请添加轮播图', trigger: 'blur'}],
                    orderNum: [{required: true, message: '请设置排序号', trigger: 'blur'}],
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                        {
                            min: 2,
                            max: 30,
                            message: "长度2-30之间"
                        }
                    ],
                    linkUrl: [
                        {required: true, message: '请输入院校地址', trigger: 'blur'},
                        {
                            min: 2,
                            max: 500,
                            message: "长度2-500之间"
                        }
                    ],
                }
            }
        }
    },
    methods: {
        add(){
            this.showPage = 2;
            this.addForm.id = '';
            this.addForm.imageUrl = '';
            this.addForm.title = '';
            this.addForm.linkUrl = '';
            this.addForm.orderNum = 1;
        },
        modify(item){
            this.showPage = 3;
            this.addForm.id = item.id;
            this.addForm.imageUrl = item.imgUrl;
            this.addForm.title = item.title;
            this.addForm.linkUrl = item.linkUrl;
            this.addForm.orderNum = item.orderNum;
        },
        handleAvatarSuccess(res, file) {
            console.log(res)
            this.addForm.imageUrl = res.data.imgUrl;
        },

        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!(isJPG||isPNG)) {
                this.$message.error('图片只能是 JPG 或者 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('图片大小不能超过 2MB!');
            }
            return (isJPG||isPNG) && isLt2M;
        },
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    let p = {};
                    let url;
                    // 新增
                    if(this.showPage==2){
                        url = '/api/schoolItem/add';
                    }else{
                        url = '/api/schoolItem/modify';
                        p.id = this.addForm.id;
                    }
                    p.title = this.addForm.title;
                    p.imgUrl = this.addForm.imageUrl;
                    p.linkUrl = this.addForm.linkUrl;
                    p.orderNum = this.addForm.orderNum;
                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.listAll();
                        this.showPage = 1;
                    })
                }
            });
        },
        listAll(){
            let p = {};
            let url = '/api/schoolItem/listAll';
            this.$http.fetch(url, p)
            .then(res=>{
                this.imgList = res.data;
            })
            .catch(err=>{

            })
        },
        goDelete(item){
            this.$confirm('确定删除该轮播图吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        })
            .then(() => {
                let p = {};
                let url = '/api/schoolItem/delete';
                p.id = item.id;
                return this.$http.fetch(url, p)
            })
            .then(res => {
                this.listAll();
            })
            .catch(() => {
                
            })
        }
    },
    mounted(){
        this.listAll();
    }
}
</script>

<style scoped>

.my-detail-button .el-button{
    padding: 0;
}
</style>